import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'
import React, { Suspense, lazy } from 'react';
import Page1 from './views/page-1'
import Page2 from './views/page-2'
import Page3 from './views/page-3'

function App() {
  return (
    <div className="App">
      <h2>微前端（无界）demo</h2>
      <BrowserRouter>
        <Link to="/react" >React项目</Link>
        <Link to="/vue" style={{ marginLeft: '20px' }}>vue项目</Link>
        <Link to="/vite" style={{ marginLeft: '20px' }}>vite vue项目</Link>
        <div style={{ marginTop: '20px' }}>

          <Suspense fallback={<div>加载中...</div>}>
            <Routes>
              <Route path='/react/*' element={<Page1 />} />
              <Route path='/vue/*' element={<Page2 />} />
              <Route path='/vite/*' element={<Page3 />} />
            </Routes>
          </Suspense>
        </div>

      </BrowserRouter>
    </div>
  );
}

export default App;
